<template>
	<view class="home_content">
		<tabBar :currentPagePath="this.$route.meta.pagePath"></tabBar>
		<view class="home_content_head">
			<view class="home_content_head_img"></view>
			<view class="home_content_head_tips">
				<view class="home_content_head_tips_label">
					<view class="home_content_head_tips_label_top">待办</view>
					<view class="home_content_head_tips_label_bottom">通知</view>
				</view>
				<view class="home_content_head_tips_viewider"></view>
				<view class="home_content_head_tips_detail" @click="goNotice">
					{{noticeText ? noticeText : "暂无待办通知"}}
				</view>
				<u-icon v-if="noticeText" name="arrow-right" size="34rpx" color="#2979ff"></u-icon>
			</view>
		</view>
		<view class="home_content_body">
			<view class="home_content_body_tip">
				<view class="home_content_body_tip_title">数据总览</view>
				<view class="home_content_body_tip_count" v-if="undoSet && undoSet.length > 0">
					<view class="home_content_body_tip_count_countDetail">
						<view class="home_content_body_tip_count_countDetail_num">
							{{ undoSet.includes(St_admreview.undo.value) ? undoDataMap[St_admreview.undo.value].length : 0 }}
						</view>
						<view class="home_content_body_tip_count_countDetail_title">待受理</view>
					</view>
					<view class="home_content_body_tip_count_countDetail">
						<view class="home_content_body_tip_count_countDetail_num">
							{{ undoSet.includes(St_admreview.accept.value) ? undoDataMap[St_admreview.accept.value].length : 0 }}
						</view>
						<view class="home_content_body_tip_count_countDetail_title">待审理</view>
					</view>
					<view class="home_content_body_tip_count_countDetail">
						<view class="home_content_body_tip_count_countDetail_num">
							{{ undoSet.includes(sendEnumKey) ? undoDataMap[sendEnumKey].length : 0 }}
						</view>
						<view class="home_content_body_tip_count_countDetail_title">待送达</view>
					</view>
				</view>
			</view>
			<view class="home_content_body_content">
				<u-tabs :list="tabList" lineColor="#264AA2"
					:activeStyle="{color: '#264AA2',fontSize: '38rpx',fontWeight: '500' }"
					:inactiveStyle="{color: '#1F1F1F',fontSize: '38rpx',fontWeight: '500'}" :scrollable="false"
					@click="tabClick" :current="current">
				</u-tabs>
				<u-list v-if="undoDataList && undoDataList.length > 0" height="300px" lowerThreshold="10%"
					class="home_content_body_content_list">
					<u-list-item class="home_content_body_content_list_item" v-for="(item, index) in undoDataList"
						:key="index" @click.native="goTodoDetail(item.taskid)">
						<u-cell v-if="activeKey != sendEnumKey" :title="formateLabel(item)">
						</u-cell>
						<u-cell v-else :title="item.content">
						</u-cell>
					</u-list-item>
				</u-list>
				<u-empty v-else text="暂无待办" style="height: 14rem;width: 100%;" mode="data"></u-empty>
			</view>

			<view class="home_content_body_bottom">
				<view class="home_content_body_bottom_left">
					<view class="home_content_body_bottom_label">法律法规专区</view>
					<view class="home_content_body_bottom_labelDetail">在线查询，方便查找</view>
				</view>
				<view class="home_content_body_bottom_right">
					<u-button type="primary" text="立即查询" color="#2074D4" shape="circle" @click="onclick"></u-button>
				</view>
			</view>

			<view class="home_content_body_bottomTip">
				<view>暂时没有更多</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		queryCaseStatistics,
		undoEvents,
		getByUserid,
		queryUndoEvents,
		getReviewById
	} from '@/common/api/approve/home/home_api.js';
	import {
		St_admreview
	} from '@/common/enumeration/St_admreview.js';
	import {
		getHandleParams
	} from '@/common/api/approve/workflow/mf_MyTasjUndo.js'
	import moment from 'moment/moment';
	export default {
		data() {
			return {
				undoDataMap: {}, // 待处理案件，按流程环节分类
				undoSet: [], // 当前存在待处理事件的类型
				noticeList: [], // 消息通知
				St_admreview: St_admreview, // 行政复议状态
				noticeText: "", // 轮播显示文字
				user: {}, // 用户信息
				sendEnumKey: 1000, // 定义送达环节枚举
				activeKey: null, // 激活的tabs的id
				current: 0, // 激活的tabs的index
				tabList: [{ // tabs页签
					name: '待受理',
					value: 6002900
				}, {
					name: '待审理',
					value: 6002904
				}, {
					name: '待送达',
					value: 1000
				}],
				applyid: '',
				taskid: '',
				formid: '',
				stepid: '',
				processinstanceid: '',
				applyid_bs: '',
				noticeIndex: 0
			}
		},
		async onLoad() {
			uni.showLoading({
				title: "加载中"
			})
			this.user = JSON.parse(sessionStorage.getItem("APPROVE_USER"))
			await this.getNotice()
			await this.queryUndoEvents()
			uni.hideLoading()
		},
		computed: {
			undoDataList: {
				get() {
					return this.undoDataMap[this.activeKey] ? this.undoDataMap[this.activeKey] : []
				},
				set() {}
			}
		},
		methods: {
			onclick() {
				uni.navigateTo({
					url: '/pages/approve/home/law'
				});
			},
			// 跳转到文书送达
			async goNotice() {
				let index
				this.noticeIndex == 0 ? index = this.noticeList.length - 1 : index = this.noticeIndex - 1
				let res = await getReviewById({
					id: this.noticeList[index].applyid
				})
				let record = JSON.parse(JSON.stringify(this.noticeList[index]))
				record.id = record.applyid
				record.status = res.data.status
				uni.navigateTo({
					url: '/pages/approve/notice/deliver?item=' + JSON.stringify(record),
				})
			},
			// 变更tab激活标签
			tabClick(e) {
				this.current = e.index
				this.activeKey = e.value
			},
			// 查询待办通知
			async getNotice() {
				let res = await getByUserid({
					userid: this.user.userid
				})
				if (res.code == 0) {
					let arry = []
					if (res.data && res.data.length) {
						res.data.forEach(item => {
							if (item.content) {
								this.noticeList.push(item)
								arry.push(item.content)
							}
						})
					}
					this.noticeLoad()
				}
			},
			// 通知数据轮播调整
			noticeLoad() {
				if (this.noticeList && this.noticeList.length > 0) {
					this.timer = window.setInterval(() => {
						this.noticeText = this.noticeList[this.noticeIndex].content
						if (this.noticeIndex == this.noticeList.length - 1) {
							this.noticeIndex = 0
						} else {
							this.noticeIndex++
						}
					}, 2000)
				} else {
					clearInterval(this.timer)
				}
			},
			// 查询待办案件
			async queryUndoEvents() {
				let res = await undoEvents({
					userid: this.user.userid
				})
				if (res.code == 0) {
					this.undoDataMap = res.data
					this.undoSet = []
					if (this.undoDataMap) {
						for (const key in this.undoDataMap) {
							// 待调解和待补正状态 放置到待受理部分
							if (Number(key) === this.St_admreview.tomediate.value || Number(key) === this.St_admreview
								.append.value) {
								this.undoSet.push(Number(this.St_admreview.undo.value))
							} else {
								this.undoSet.push(Number(key))
							}
						}
						this.activeKey = this.undoSet.includes(this.St_admreview.undo.value) ? this.St_admreview.undo
							.value : (this.undoSet.includes(this.St_admreview.accept.value) ? this.St_admreview.accept
								.value : this.undoSet[0])
						this.tabList.forEach((item, index) => {
							if (item.value == this.activeKey) {
								this.current = index
							}
						})
					}
				}
			},
			// 格式化待办
			formateLabel(item) {
				let result = item.acceptcode
				// 判断当前的案件的状态
				switch (item.status) {
					case this.St_admreview.undo.value:
						result = result + '---待处理' + '---申请人【' + item.applyname + '】'
						break
					case this.St_admreview.tomediate.value:
						result = result + '---待调解' + '---申请人【' + item.applyname + '】'
						break
					case this.St_admreview.append.value:
						result = result + '---待补正' + '---申请人【' + item.applyname + '】'
						break
					case this.St_admreview.accept.value:
						result = result + '---待审理' + '---申请人【' + item.applyname + '】'
						break
					default:
						result = result + ''
				}
				return result
			},


			// 跳转到待办详情页
			async goTodoDetail(taskid) {
				this.taskid = taskid
				let res = await getHandleParams(taskid)
				if (res.code == 0 && res.data != null) {
					// console.log(res)
					this.applyid = res.data.applyid
					this.formid = res.data.formid
					this.processinstanceid = res.data.processinstanceid
					this.stepid = res.data.stepid
					this.applyid_bs = res.data.faapplyid

				}
				uni.navigateTo({
					url: "/pages/approve/todo/todoDetail?applyid=" + this.applyid + "&taskid=" + this.taskid +
						"&formid=" + this.formid + "&applyid_bs=" + this.applyid_bs + "&stepid=" + this
						.stepid + "&processinstanceid=" + this.processinstanceid,
				})


			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		padding-top: 0rpx !important;
		box-sizing: border-box;
	}

	// 方形图标
	.square {}

	// 圆形图标
	.round {}

	.home_content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
		padding-bottom: 40rpx;

		&_head {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			height: 12rem;
			box-sizing: border-box;
			position: relative;

			&_img {
				width: 100%;
				height: 100%;
				position: absolute;
				/* 小图片推荐~@绝对路径引入 */
				background-image: url('~@/static/images/home/homeHead.png');
				background-repeat: no-repeat;
				background-size: cover;
			}

			&_back {
				width: 100%;
				position: absolute;
				top: 1%;
				padding-left: 15px;
				padding-top: 15px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 1rem;
				font-weight: 500;
				color: #ffffff;

				&_label {
					margin-left: 0.2rem;
				}
			}

			&_tips {
				padding: 20rpx;
				width: calc(100% - 3rem);
				background: #ffffff;
				box-shadow: 2px 2px 10px 0px rgba(237, 237, 237, 0.59);
				border-radius: 10px;
				position: absolute;
				bottom: -2.5rem;
				display: flex;
				align-items: center;
				justify-content: space-around;

				&_label {
					-webkit-transform: skew(-6deg);
					-ms-transform: skew(-6deg);
					-moz-transform: skew(-6deg);
					-o-transform: skew(-6deg);

					&_top {
						font-size: 1.1rem;
						font-weight: bold;
						color: #2074d4;
					}

					&_bottom {
						font-size: 1.1rem;
						font-weight: bold;
						color: #1f1f1f;
					}
				}

				&_viewider {
					height: 2rem;
					border: 1px solid #1f1f1f;
					opacity: 0.2;
				}

				&_detail {
					width: 70%;
					font-size: 1rem;
					font-weight: 500;
					color: #000;
					overflow: hidden; //溢出隐藏
					white-space: nowrap; // 强制一行显示
					text-overflow: ellipsis; // 显示。。。省略号
				}

			}
		}

		&_body {
			width: 100%;
			background-color: #f5f5f5;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;

			&_tip {
				margin-top: 3.6rem;
				width: calc(100% - 3rem);
				background: #ffffff;
				border-radius: 10px;
				padding: 20rpx;
				background-image: url('~@/static/images/home/homeTotal.png');
				background-repeat: no-repeat;
				background-size: contain;
				background-position: right;
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				justify-content: space-around;

				&_title {
					font-size: 1.2rem;
					color: #000000;
					margin-left: 10px;
					font-weight: 500;
				}

				&_count {
					margin-top: 30rpx;
					width: 100%;
					display: flex;
					align-items: center;
					flex-direction: row;
					justify-content: space-around;

					&_countDetail {
						width: 25%;
						display: flex;
						align-items: center;
						flex-direction: column;

						&_title {
							font-size: 1rem;
							font-weight: bold;
							color: #1f1f1f;
							opacity: 0.65;
							margin-top: 10rpx;
						}

						&_numRed {
							font-size: 0.9rem;
							// font-weight: 600;
							color: #cd3936;
						}

						&_num {
							font-size: 1.2rem;
							font-family: Helvetica Neue;
							font-weight: 600;
							color: #1f1f1f;
						}
					}
				}
			}

			&_content {
				padding: 20rpx;
				width: calc(100% - 3rem);
				background: #ffffff;
				border-radius: 10px;
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				justify-content: space-around;
				margin-top: 1rem;

				&_label {
					font-size: 1.2rem;
					color: #000000;
					margin-left: 10px;
					font-weight: bold;
				}

				&_case {}

				&_list {
					height: 300px;

					&_item {
						margin-top: 20rpx;
					}

					/deep/ .u-cell__title {
						font-weight: 500;
						color: #1f1f1f;
						opacity: 0.65;
					}

					/deep/ .u-cell__title-text {
						width: 310px !important;
						font-size: 1rem;
						overflow: hidden; //溢出隐藏
						white-space: nowrap; // 强制一行显示
						text-overflow: ellipsis; // 显示。。。省略号
					}
				}
			}

			&_bottom {
				width: calc(100% - 4rem);
				background: #ffffff;
				border-radius: 1rem;
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 1rem;
				background-image: url('~@/static/images/home/homeLaw.png');
				background-repeat: no-repeat;
				background-size: cover;
				padding: 40rpx;
				margin-bottom: 80rpx;

				&_label {
					font-size: 1.1rem;
					font-weight: bold;
					color: #ffffff;
					margin-bottom: 0.4rem;
				}

				&_labelDetail {
					font-size: 0.9rem;
					font-weight: 500;
					color: #ffffff;
					opacity: 0.65;
				}
			}

			&_bottomTip {
				width: 100%;
				background-color: #f5f5f5;
				text-align: center;
				font-size: 0.9rem;
				font-weight: 500;
				color: #d2d5d9;
				margin-top: 1rem;
				margin-bottom: 1.2rem;
			}
		}
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	// 平板宽高适配
	@media screen and (min-width: 700px) {
		.home_content_head {
			height: 20rem;
		}

		.home_content_head_img {
			height: 20rem;
		}
	}

	@media screen and (min-width: 1024px) {
		.home_content_head {
			height: 30rem;
		}

		.home_content_head_img {
			height: 30rem;
		}
	}

	@media screen and (min-height: 800px) {
		.home_content_body {
			height: 40rem;
		}
	}

	@media screen and (min-height: 1024px) {
		.home_content_body {
			height: 50rem;
		}

		.home_content_body_content {
			height: 25rem;
		}

		.home_content_body_bottom {
			height: 8rem;
		}
	}
</style>